<template>
	<view class="pr">
		<view class="background w-max" style="margin-bottom: -200rpx; border-radius: 0 0 100% 100% /0 0 50rpx 50rpx;">
			<navbar :back="true" :backgroundColor="{background: $background}" :scrollTop="scrollTop"
				:title="data.name" titleColor="#fff">
			</navbar>
			<view class="h200"></view>
		</view>
		<view class="p20">
			<othD :data="data" />
			<view class="mt20 flex">
				<view class="fs28 fw-700 bottom pb6">
					用户评价
				</view>
			</view>
			<view class="bg-fff radius12 mt20 ">
				<view class="pl20 pt30 bg-fff radius20 flex flex-wrap ">
					<view v-for="(item,index) in wordTabs" :key="index" @click="comment_word=item.id"
						class="flex row-center h60 w120 bg-f8f radius32 mr30 mb24 color-999"
						:class="comment_word==item.id?'on color-zs':''">
						{{item.name}}
					</view>
				</view>
				<commentList :list="comment" />
			</view>
		</view>
		<view class="h120"></view>
		<view class="fixed bottom0 left0 w-max bg-fff flex ">
			<view class="flex1 p20">
				<u-button type="warning" ripple @click="masterService">一对一陪护</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				current: 0,

				data: '',


				comment: '',
				comment_word: 'all',

				wordTabs: [{
						name: '全部',
						id: 'all'
					},
					{
						name: '好评',
						id: 'good'
					},
					{
						name: '中评',
						id: 'medium'
					},
					{
						name: '差评',
						id: 'bad'
					},
				]
			};
		},
		watch: {
			comment_word() {
				this.masterComment()
			}
		},
		onLoad() {
			this.getData()
			this.masterComment()
		},
		onReachBottom() {
			this.masterComment()
		},
		methods: {
			getData() {
				this.$request('/member/search/masterInfo', this.$params).then(res => {
					let data = res.data
					this.data = data
					uni.setNavigationBarTitle({
						title: data.name
					})
					this.shareData.title = this.$config.shop_title + ' 陪诊师:' + data.name
				})
			},
			masterService(e) {
				this.$request('/member/search/masterService', this.$params).then(res => {
					this.$goDemo(res.data)
				})
			},
			masterComment(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					...this.$params,
					comment_word: this.comment_word,
					page: this.page,
				}
				this.$request('/member/search/masterComment', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.comment.push(...list) : this.comment = list
				})
			},
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.on {
		// box-sizing: border-box;
		// margin: -1rpx;
		background-color: rgba($color: $zs, $alpha:0.07);
		// background: rgba(0,190,195,0.07);
		border: 1rpx solid $zs;
	}
</style>
